<template>
  <a-modal :visible = "modalVisible" centered title = "设备情况" @cancel = "handleCancel" width = "80%" :footer = "null">
    <div>
      <div class = "content-top">
        <!--<ul class="ul-class">
          <template>
            <li class="li-class">
              <div class="li-center__box">
                <p class="p1" @click="initializeRequest('A')">未出库设备</p>
              </div>
              <span>{{send.notOutboundAmount}}</span>
            </li>
            <li class="li-class" @click="initializeRequest('B')">
              <div class="li-center__box">
                <p class="p1">出库未运行设备</p>
              </div>
              <span>{{send.outboundNotRunAmount}}</span>
            </li>
            <li class="li-class" @click="initializeRequest('C')">
              <div class="li-center__box">
                <p class="p1">出库已运行设备</p>
              </div>
              <span>{{send.outboundRunningAmount}}</span>
            </li>
          </template>
        </ul>-->
      </div>
      <a-table
          :data-source = "dataList"
          :pagination = "false"
          :columns = "columns"
          style = "height:500px"
          :rowKey = "record=> record.id"
      ></a-table>
      <div class = "content-bottom clearfix modal">
        <div class = "page-box1">
          <a-pagination
              :show-total = "total => `共 ${total}条记录`"
              v-model = "current"
              :total = "total"
              :defaultPageSize = "size"
              :item-render = "itemRender"
              @change = "pagechangeFn"
          />
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script>
import moment from "moment";

export default {
  name: "addModal",
  props: {
    modalVisible: Boolean,
    send: Object,
  },
  data() {
    return {
      columns: [],
      dataList: [], //未出库数据
      a: this.send,
      current: 1,
      size: 7,
      total: 0,
      status: "",
      /* listShow: [
        {
          name: "异常设备",
          no: 24,
        },
        {
          name: "异常设备",
          no: 24,
        },
        {
          name: "异常设备",
          no: 24,
        },
      ], */
    };
  },
  methods: {
    initializeRequest(data) {
      // this.status = data;
      // if (data == "A") {
      //   console.log(this.a);
      //   this.$api
      //     .PostnotOutbound({
      //       currentPage: this.current,
      //       pageSize: this.size,
      //       spareVersion: this.send.spareVersion,
      //       sparePropertyId: this.send.sparePropertyId,
      //       spareTypeId: this.send.spareTypeId,
      //     })
      //     .then((res) => {
      //       console.log(res);
      //       this.dataList = res.data.data.records;
      //       this.total = res.data.data.total;
      //       this.dataList.forEach((v) => {
      //         v.createTime = moment(v.createTime).format("YYYY-MM-DD");
      //       });
      //     });
      //   this.columns = [
      //     {
      //       title: "序号",
      //       dataIndex: "id",
      //       align: "center",
      //       ellipsis: true,
      //       width: "100px",
      //       customRender: (text, record, index) =>
      //         `${(this.current - 1) * this.size + index + 1}`,
      //     },
      //     {
      //       title: "设备名称",
      //       dataIndex: "spareName",
      //       align: "center",
      //     },
      //     {
      //       title: "设备入库时间",
      //       dataIndex: "createTime",
      //       align: "center",
      //     },
      //     {
      //       title: "入库操作人员id",
      //       dataIndex: "createUser",
      //       align: "center",
      //     },
      //     {
      //       title: "入库操作人员名称",
      //       dataIndex: "nickname",
      //       align: "center",
      //     },
      //   ];
      // } else
      if (data == "B") {
        console.log(this.status);
        console.log(this.send)
        this.$api
            .PostVersionApply({
              currentPage: this.current,
              pageSize: this.size,
              spareVersion: this.send.spareVersion,
              propertyId: this.send.sparePropertyId,
              typeId: this.send.spareTypeId,
            })
            .then((res) => {
              console.log(res);
              this.dataList = res.data.data.records;
              this.total = res.data.data.total;
              this.dataList.forEach((v) => {
                v.applyTime = moment(v.applyTime).format("YYYY-MM-DD");
              });
            });
        this.columns = [
          {
            title: "序号",
            dataIndex: "id",
            align: "center",
            ellipsis: true,
            width: "100px",
            customRender: (text, record, index) =>
                `${(this.current - 1) * this.size + index + 1}`,
          },
          {
            title: "申领数量",
            dataIndex: "applyAmount",
            align: "center",
          },
          {
            title: "申领时间",
            dataIndex: "applyTime",
            align: "center",
          },
          {
            title: "领用原因",
            dataIndex: "applyOpinion",
            align: "center",
          },
          // {
          //   title: "领用人",
          //   dataIndex: "nickname",
          //   align: "center",
          // },
        ];
        // } else if (data == "C") {
        //   this.$api
        //     .PostoutrunDetail({
        //       currentPage: this.current,
        //       pageSize: this.size,
        //       spareVersion: this.send.spareVersion,
        //       sparePropertyId: this.send.sparePropertyId,
        //       spareTypeId: this.send.spareTypeId,
        //     })
        //     .then((res) => {
        //       console.log(res);
        //       this.dataList = res.data.data.page.records;
        //       this.total = res.data.data.total;
        //       this.dataList.forEach((v) => {
        //         v.createTime = moment(v.createTime).format("YYYY-MM-DD");
        //       });
        //     });
        //   this.columns = [
        //     {
        //       title: "序号",
        //       dataIndex: "id",
        //       align: "center",
        //       ellipsis: true,
        //       width: "100px",
        //       customRender: (text, record, index) =>
        //         `${(this.current - 1) * this.size + index + 1}`,
        //     },
        //     {
        //       title: "设备名称",
        //       dataIndex: "spareName",
        //       align: "center",
        //     },
        //     {
        //       title: "设备经度",
        //       dataIndex: "x",
        //       align: "center",
        //     },
        //     {
        //       title: "设备纬度",
        //       dataIndex: "y",
        //       align: "center",
        //     },
        //     {
        //       title: "设备高度",
        //       dataIndex: "height",
        //       align: "center",
        //     },
        //   ];
        // }
      }
    },
    handleCancel(e) {
      console.log(e);
      this.$emit("update:modalVisible", false);
    },

    // 分页器
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
      this.current = page;
      this.size = pageSize;
      this.initializeRequest(this.status);
    },
  },
  watch: {
    status: {
      deep: true,
      handler() {
        this.current = 1;
      },
    },
  },
};
</script>
<style scoped>
.content-top {
  width: 100%;
  height: 15%;
}

.ul-class {
  width: 102%;
  height: 100%;
  background: url(../../../assets/public/监测.png) no-repeat;
  background-size: 100% 100%;
  padding: 2% 1%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  margin-left: -1%;
}

.li-class {
  width: 20%;
  height: 100%;
  border-left: 1px solid #37ddc0;
  padding: 0 2%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.li-class:first-child {
  border-left: 0;
}

.li-class > img {
  width: 60px;
}

.li-class .li-center__box .p1 {
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
}

.li-class .li-center__box .p2 {
  font-size: 16px;
}

.li-class > span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 46px;
}

.itemHover {
  color: black !important;
}

.modal {
  margin-top: 30px;
}

.modal > .page-box1 {
  float: right;
}

::v-deep .ant-table-tbody > tr > td:first-child {
  border-left: 1px solid #207064;
}

::v-deep .ant-table-tbody > tr > td:last-child {
  border-right: 1px solid #207064;
}
</style>
